<template>
  <div class="serve">
    <!-- 头部 -->
    <HeadPersonal></HeadPersonal>

    <!-- register -->
    <div class="register">
      <!-- registerOne -->
      <div class="registerOne">
        <div class="block">
          <div class="registerOneC">
            <div class="registerOneCNPC">
              <div class="registerOneCNPCNS on">
                <p>1</p>
                <h4>填写手机号</h4>
              </div>
              <div class="registerOneCNPCNS">
                <p>2</p>
                <h4>输入密码</h4>
              </div>
              <div class="registerOneCNPCNS">
                <p>3</p>
                <h4>输入邮箱</h4>
              </div>
              <div class="registerOneCNPCNS">
                <p>4</p>
                <h4>绑定微信</h4>
              </div>
              <div class="registerOneCNPCNS">
                <p>5</p>
                <h4>完成注册</h4>
              </div>
              <div class="clear"></div>
              <div class="registerOneCNPCNhr"></div>
            </div>
            <div class="registerOneCNMOB">
              <p>1</p>
              <h4>填写手机号</h4>
            </div>
            <div class="registerOneCF">
              <div class="registerOneCFI">
                <p>手机号</p>
                <div class="registerOneCFIi">
                  <input
                    type="text"
                    placeholder="请输入手机号"
                    class="registerOneCFIinput"
                    v-model="phone"
                  />
                </div>
              </div>
              <div class="registerOneCFI">
                <p>验证码</p>
                <div class="registerOneCFIi">
                  <input
                    type="text"
                    placeholder="请输入验证码"
                    class="registerOneCFIinput"
                    v-model="code"
                  />
                  <em @click="verify" v-show="show" >发送验证码</em>
                  <em v-show="!show" >{{count}} s</em>
                </div>
              </div>
              <label class="registerOneCFcheck">
                <input type="checkbox" v-model="checkTrue" />我已阅读并同意
                <em @click="registerOneCFcheck">服务协议、隐私保护政策</em>
              </label>
              <div @click="next" class="enrollPwdOneCsub">下一步</div>
              <!-- <input type="submit" value="下一步" class="registerOneCFsub"/> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 服务协议、隐私保护政策弹窗 -->
      <div class="registerOneCFcheckPUP">
        <div class="registerOneCFcheckPUPC">
          <h2>服务协议及隐私保护</h2>
          <div class="registerOneCFcheckPUPCE">
            <p>
                  <h3>欢迎您进行注册成为三菱电机自动化（中国）有限公司网站会员，请您在注册时阅读以下交易条款：</h3>
                  <h3>一、关于会员资格</h3>
                  1、凡承认本网站会员注册条款的自然人均可成为三菱电机自动化（中国）有限公司网站会员。<br>
                  2、会员须提供详尽、准确的个人资料，且经常更新注册资料以符合会员实际情况。<br>
                  <h3>二、本网站会员注册条款的接受</h3>
                1、本网站运作权和解释权归cn.mitsubishielectric.com/fa/zh/所有。<br>
                2、用户要想成为本网站会员，享受本网站的服务，必须完全接受和严格遵守会员注册条款。如果用户注册成功，即表示用户同意接受本注册条款，成为本网站会员，享受本网站规定的服务。<br>
                3、用户在此授权本网站可以向其电子邮箱发送商业信息。<br>
                  <h3>三、会员应遵守的重要条款：</h3>
                  1、本网站提供的所有内容仅供会员个人使用。<br>
                  2、严禁传播网上电子书籍，一经发现，将追究其相关责任。<br>
                  (1)任何人注册成为MEACH会员必须接受MEACH网站使用条款，同时成为网站会员，拥有MEACH会员所具有的权利，同时需承担MEACH会员的义务。<br>
                  (2)会员应当自觉遵守：爱国、守法、自律、真实、文明的原则；会员应当崇尚网上道德规范，遵守《全国人民代表大会常务委员会关于维护互联网安全的决定》以及中华人民共和国其他各项相关法律、法规。<br>
                  (3)严禁发布任何含有违反国家法律、法规、危害国家安全、破坏民族团结及社会稳定内容的文章、言论，严禁发表任何包含种族、性别、宗教等歧视性内容，或者含有色情内容的文章、言论，不得对任何人进行侮辱、谩骂或其他任何形式的人身攻击。本站有权对会员的文章、言论进行审核，对违反上述禁止事项的文章、言论予以删除；情节严重者，本站将取消其注册用户资格。<br>
                  (4)会员应当自行承担一切因自身行为而直接或者间接导致的民事或刑事法律责任。<br>
                  (5)未经本站的授权或许可，任何会员不得借用本站的名义从事任何商业活动，也不得将本站作为从事商业活动的场所、平台或其他任何形式的媒介。禁止将本站用作从事各种非法活动的场所、平台或者其他任何形式的媒介。违反者若触犯法律，一切后果自负，本站不承担任何责任。<br>
                  (6)本站将保留修改规则、删除不良言论及不定期清理版面的权力。<br>
                  <h3>四、会员的帐号，密码和安全性</h3>
                  用户一旦注册成功，即成为本网站的会员，将得到一个会员帐号和密码。<br>
                  <h3>五、用户隐私制度</h3>
                  尊重会员个人隐私是MEACH网站的基本政策。我们不会在未经会员授权时公开、编辑或透露其注册资料，或将客户名单出售、出租或租借给第三方。但为便于提供服务，我们有时会将信息提供给为我们工作的其他公司，并与该类公司签署详细的保密协议以保证会员个人隐私的安全。<br>
                  <h3>六、会员有以下行为而导致帐户被取消，责任自负</h3>
                    1、违反本网站注册条款。<br>
                    2、有损害他人的的行为。<br>
                    3、违反中国的法律、法规。<br>
                  <h3>七、知识产权与版权声明</h3>
                  1、本网站中所有内容均受著作权法、版权法及其它相关法律的保护。任何人不能擅自复制、仿造这些内容。<br>
                  2、本网站提供的内容仅供会员个人使用，不得用于其它目的。<br>
                  <h3>八．法律声明及其它</h3>
                  1、本服务条款受约于中华人民共和国国家法律，会员和本网站须一致同意服从中华人民共和国法院管辖。如发生会员注册条款与中华人民共和国法律相抵触时，则这些条款将完全按法律规定重新解释，而其它条款则依旧保持对会员产生法律效力和影响。<br>
                  2、本网站中的帮助信息、栏目的相关介绍及注意事项为本条款的附件，作为解释本条款的具体依据。

            </p>
          </div>
          <div class="registerOneCFcheckPUPCB">
            <h4 @click="registerOneCFcheckPUPclose()">取消</h4>
            <p @click="agreen">同意并继续</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/personal.css";
import HeadPersonal from "@/components/headregister";
import HomeHooter from "@/components/footer";

export default {
  name: "register",
  data() {
    return {
      phone: "",
      code: "",
      checkTrue: false,
      verifyCode: "",
      show:true, 
      timer:null, 
      count:''
    };
  },
  components: {
    HeadPersonal,
    HomeHooter
  },
  methods: {
    registerOneCFcheck() {
      $(".registerOneCFcheckPUP").show();
    },
    registerOneCFcheckPUPclose() {
      this.$router.go(-1);//返回上一层
    },

    //发送验证码
    verify() {
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning"
        });
        return false;
      }

      const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }

      let id = this.$axios,
        params = {
          phone: this.phone
        };
      this.$api.member.sendRegisterCode(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.verifyCode = result.data;
          this.$message({
            message: result.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: result.msg,
            type: "warning"
          });
        }
      });
    },

    // 下一步
    next() {
      var reg = /^1[3|5|7|8]\d{9}$/g;
      if (this.phone === "") {
        this.$message({
          message: "请输入手机号",
          type: "warning"
        });
        return false;
      }
      if (!reg.test(this.phone)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning"
        });
        return false;
      }
      if (this.code === "") {
        this.$message({
          message: "请输入验证码",
          type: "warning"
        });
        return false;
      }
      if (this.checkTrue && this.verifyCode === this.code) {
        this.$router.push({
          name: "register-registerTwo",
          query: { phone: this.phone, code: this.code }
        });
      } else if (!this.checkTrue) {
        this.$message({
          message: "请勾选同意注册协议",
          type: "warning"
        });
        return
      } else {
        this.$message({
          message: "验证码错误",
          type: "warning"
        });
      }
    },

    // 同意协议
    agreen() {
      this.checkTrue = true;
      $(".registerOneCFcheckPUP").hide();
    }
  },
  mounted() {}
};
</script>

